<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改密码</title>
    <link rel="shortcut icon" href="/static/paper/favicon.ico">
    <link rel="stylesheet" href="/static/paper/plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="/static/paper/styles/common.css">
    <link rel="stylesheet" href="/static/paper/styles/icon/iconfont.css"/>
    <style>
        .edit_pad-container {
            max-width: 400px;
            margin: 100px auto;
            padding: 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>

<body>
<div id="edit_pad-app" class="edit_pad-container">
    <h2>修改密码</h2>
    <el-form ref="edit_pwdForm" :model="edit_pwdForm" :rules="edit_padRules">
        <el-form-item label="邮箱" prop="email">
            <el-input v-model="edit_pwdForm.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
            <el-input v-model="edit_pwdForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="edit_pwdForm.password" placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="Edit_pad">确定</el-button>
            <el-button @click="goToLogin">取消</el-button>
        </el-form-item>
    </el-form>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js"></script>
<script src="/static/paper/plugins/element-ui/index.js"></script>
<script src="/static/paper/plugins/axios/axios.min.js"></script>
<script src="/static/paper/api/login.js"></script>
<script>
    new Vue({
        el: '#edit_pad-app',
        data() {
            return {
                edit_pwdForm: {
                    email: '',
                    username: '',
                    password: ''
                }
            }
        },
        computed: {
            edit_padRules() {
                return {
                    email: [
                        {required: true, message: '请输入邮箱', trigger: 'blur'},
                        {type: 'email', message: '邮箱格式不正确', trigger: 'blur'}
                    ],
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ]
                };
            }
        },
        methods: {
            async Edit_pad() {
                this.$refs.edit_pwdForm.validate(async (valid) => {
                    if (valid) {
                        console.log("表单验证通过，准备发送请求");
                        try {
                            const response = await edit_pwdApi(this.edit_pwdForm);
                            console.log("API 响应:", response); // 调试输出
                            if (response.status === 'success') {
                                this.$message.success(response.msg); // 显示成功消息
                                setTimeout(() => {
                                    this.goToLogin(); // 延迟跳转到登录
                                }, 2000); // 2000 毫秒，您可以根据需要调整
                            } else {
                                this.$message.error(response.msg || '修改失败');
                            }
                        } catch (error) {
                            console.error("修改请求错误:", error);
                            this.$message.error('修改失败，请重试');
                        }
                    } else {
                        console.log("表单验证失败");
                    }
                });
            },
            goToLogin() {
                window.location.href = '/static/paper/page/login/login.html'; // 替换为您的登录页面路径
            }
        }
    })
</script>
</body>

</html>
